<template>
  <div class="data-table">
    <header-title :title="title" :icon="icon"></header-title>
    <el-row>
      <el-col :span="24">
        <div class="data-bottom">
          <!-- 搜索输入框 -->
          <el-input 
            placeholder="搜索订单" 
            v-model="searchQuery" 
            @input="searchOrder"
            clearable 
            width="100"
            class='bottom-btn'
          />
          <el-row>
            <el-col :span="24">
              <el-table fit :data="filteredOrders" center height="calc(100vh - 216px)" border tooltip-effect="dark">
                <el-table-column type="index" label="序号" width="80px" />
                <el-table-column prop="orderId" label="订单号" />
                <el-table-column prop="name" label="商品名称" />
                <el-table-column label="商品图片">
                  <template #default="scope">
                    <img :src="scope.row.image" class="product-image" alt="商品图片" />
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" />
                <el-table-column prop="quantity" label="数量"  width="80px" />
                <el-table-column prop="userName" label="用户名" />
                <el-table-column prop="phone" label="联系电话" />
                <el-table-column prop="address" label="地址" />
                <el-table-column prop="status" label="状态">
                  <template #default="itemScope">

                    <el-tag :type="getTagType(itemScope.row)">
                      {{ itemScope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue';
import { useOrderDatastore } from '@/stores/order'; // 引入 Pinia store
import HeaderTitle from '@/components/HeaderTitle.vue';

const title = ref('订单列表');
const icon = ref('List');
const searchQuery = ref('');
const useOrderstore = useOrderDatastore();

const filteredOrders = computed(() => useOrderstore.filteredOrders);

// 搜索处理函数
const searchOrder = () => {
  useOrderstore.setSearchQuery(searchQuery.value);
};


onMounted (() => {
  useOrderstore.getOrderData()
})
// const orders = computed(() => useOrderstore.orderItems);

// 获取状态标签类型
const getTagType = (order) => {
  if (order.status === '已发货') return 'success';
  if (order.status === '未发货') return 'warning';
  return 'info';
};
</script>

<style scoped lang="scss">
.data-table {
  width: 100%;
  height: 100%;
  padding: 0 10px;

  .data-top {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    color: #478fca;
    font-size: 20px;

    .img {
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
    }

    .title {
      font-size: 16px;
      display: flex;
      align-items: center;
    }
  }

  .data-bottom {
    width: 100%;
    .bottom-btn {
      margin: 5px 5px 5px 0;
      font-size: 12px;
      width: 20%;
    }

    .image {
      width: 50px;
      height: 50px;
      object-fit: cover;
    }

    .product-image {
      width: 100px;
      height: 70px;
      margin-bottom: 15px;
    }

    .description {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }
  }
}
</style>
